
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>点击滑动图片</title>
<style>
#div1 { width:280px; height:180px; border:1px solid #333; margin:0 auto; position:relative; z-index:1; }
#div1 a { width:50px; height:50px; border-radius:50%; border:1px solid #333; background:red; position:absolute; top:74px; z-index:5; }
#div1 .prev { left:-60px; }
#div1 .next { right:-60px; }
#div1 img { position:absolute; top:0; left:0; transition:1s; }
/*#div1:hover img { left:-280px; opacity:0; }*/

html, body { width:100%; height:100%; margin:0; }

#text { width:300px; height:100px; border:10px solid #999; background:#fff; position:absolute; top:50%; left:50%; margin:-60px 0 0 -160px; z-index:3; text-align:center; display:none;  }
#bg { width:100%; height:100%; background:#000; opacity:0.3; position:absolute; top:0; left:0; z-index:2; display:none; }
</style>
</head>

<body>

<div id="div1">
	<a href="javascript:;" class="prev"></a>
	<a href="javascript:;" class="next"></a>
	<img src="8-img/001.jpg" width="280" height="180" />
	<img src="8-img/002.jpg" width="280" height="180" />
	<img src="8-img/003.jpg" width="280" height="180" />
	<img src="8-img/004.jpg" width="280" height="180" />
</div>

<div id="text">
	<p>再来一次？</p>
	<input type="button" value="重来" />
</div>
<div id="bg"></div>

<script>
var oDiv = document.getElementById('div1');
var aA = oDiv.getElementsByTagName('a');
var aImg = oDiv.getElementsByTagName('img');


var oBg = document.getElementById('bg');
var oText = document.getElementById('text');
var oBtn = oText.getElementsByTagName('input')[0];

var sgin = 1;
var iNow = 0;

for (var i=0; i<aImg.length; i++) {
	aImg[i].style.zIndex = aImg.length-i;
}

aA[0].onclick = function () {
	sgin = -1;
	doMove();
};
aA[1].onclick = function () {
	sgin = 1;
	doMove();
};
oBtn.onclick = function () {
	oBg.style.display = oText.style.display = 'none';
	for (var i=0; i<aImg.length; i++) {
		aImg[i].style.left = 0;
		aImg[i].style.opacity = 1;
	}
	
	iNow = 0;
};

function doMove() {
	
	// document.title = iNow;
	if ( iNow < aImg.length-1 ) {
		aImg[iNow].style.left = sgin*280 + 'px';
		aImg[iNow].style.opacity = 0;
		
		iNow++;
	}
	else {
		fnReset();
	}
}

function  fnReset() {
	oBg.style.display = oText.style.display = 'block';
}

</script>

</body>
</html>

